<template>
  <div class="container with-nav-padding">
    <div class="detail">
      <div class="header">
        <div class="left">
          <img :src="dynamicList.avatar" alt="" />
          <div class="text">
            <div class="username">{{ dynamicList.nickname }}</div>
            <div class="time">{{ dynamicList.created_at }}</div>
          </div>
          <button @click="attention($event)" class="follow-btn">
            <!--<img src="@/assets/车主宝首页改-assets/fu.png" alt=""/>-->
            <template v-if="$route.query.is_link == 0">
              +关注
            </template>
            <template v-if="$route.query.is_link == 1">
              取消关注
            </template>
          </button>
        </div>
        <div class="right">
          <button class="more-btn" @click="showMoreMask = true"></button>
        </div>
      </div>
      <div class="video">
        <video
          @click="control($event)"
          :src="dynamicList.links"
          :poster="dynamicList.cover"
        ></video>
      </div>
      <div class="content">
        {{ dynamicList.describe }}
      </div>
      <div class="location">
        <img src="@/assets/动态详情1-assets/地址 (1).png" alt="" />
        上海普陀区中潭路
      </div>
      <div class="footer">
        <button class="btn">
          <img
            style="height:0.5rem;"
            src="@/assets/用户主页1-assets/eye.png"
            alt=""
          />
          {{ item.watch ? item.watch : "浏览" }}
        </button>
        <button class="btn">
          <img
            @click="like($event)"
            src="@/assets/用户主页1-assets/zan.png"
            alt=""
          />
          <span class="zan">{{ dynamicList.like }}</span>
        </button>
        <button @click="commentInput" class="btn">
          <img src="@/assets/用户主页1-assets/comment.png" alt="" />
          {{ dynamicList.evaluate_num }}
        </button>
      </div>
      <div v-if="otherComment.length" class="comment">
        <div class="triangle"></div>
        <div
          class="comment-cell with-grey-bottom-border"
          v-for="(item, index) in threeComment"
          :key="index"
        >
          <img class="comment-avatar" :src="item.avatar" alt="" />
          <div class="time">{{ item.created_at }}</div>
          <span class="nickname">{{ item.nickname }}</span>
          <div>
            {{ item.describe }}
          </div>
        </div>
        <div
          class="comment-cell with-grey-bottom-border"
          v-for="(item, index) in otherComment"
          :key="index"
          v-show="bool"
        >
          <img class="comment-avatar" :src="item.avatar" alt="" />
          <div class="time">{{ item.created_at }}</div>
          <span class="nickname">{{ item.nickname }}</span>
          <div>
            {{ item.describe }}
          </div>
        </div>
      </div>
      <div
        class="show-more"
        v-if="otherComment.length != 0"
        @click="showComment"
        v-show="open"
      >
        点击展开{{ otherComment.length }}条评论
      </div>
      <div class="show-more" @click="hideComment" v-show="close">
        点击收起评论
      </div>
    </div>
    <div class="recommend">
      <div
        class="title"
        :style="{ background: dynamicStatus === 1 ? 'none' : '#fff' }"
      >
        相关推荐
      </div>
      <dynamic-panel-1
        v-if="dynamicStatus === 1 && dynamicList.length"
      ></dynamic-panel-1>
      <dynamic-panel-2
        v-else-if="dynamicStatus === 2 && dynamicList.length"
      ></dynamic-panel-2>
    </div>
    <div class="bottom-input">
      <input
        placeholder="写评论..."
        type="text"
        id="comment"
        name="comment"
        class="input"
        v-model="content"
      />
      <button class="zan"></button>
      <button @click="sendComment" class="send">发送</button>
    </div>
    <more-mask
      v-if="showMoreMask"
      @panelClose="showMoreMask = false"
      :dynamicId="dynamicList.id"
      :userId="dynamicList.user_id"
    ></more-mask>
  </div>
</template>

<script>
import dynamicPanel1 from "./component/dynamic-panel-1.vue";
import dynamicPanel2 from "./component/dynamic-panel-2.vue";
import moreMask from "./component/more-mask.vue";
import { getDetailtData, sendZan, follow, sendMask } from "@/api/dynamics";
import { mapState } from "vuex";
// import {getUserHomePage, getHomeDynamic, sendZan, follow} from '@/api/dynamics';
//sendZan,follow,sendMask
export default {
  data() {
    return {
      item: {
        watch: 33,
        zan: 344,
        comment: 53
      },
      dynamicStatus: 1,
      dynamicList: {},
      showMoreMask: false,
      threeComment: [], //前三条评论
      otherComment: [], //余下的评论
      bool: false, //控制余下评论的显示与隐藏
      open: true, //控制打开的显示与隐藏
      close: false, //控制收起评论的显示与隐藏
      content: "" //评论内容
    };
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  methods: {
    commentInput() {
      document.getElementById("comment").focus();
    },
    control(e) {
      let current = e.target;
      if (current.paused) {
        // 如果视频是暂停的
        current.play();
      } else {
        current.pause();
      }
    },
    showComment() {
      //显示动态
      this.bool = true;
      this.open = false;
      this.close = true;
    },
    hideComment() {
      //隐藏动态
      this.bool = false;
      this.open = true;
      this.close = false;
    },
    like(e) {
      sendZan({
        id: this.$route.query.id
      }).then(res => {
        let state = res.data.data.type;
        let zan = e.target.nextSibling;
        let zanNum = zan.innerText;
        if (state == 1) {
          zanNum++;
          zan.innerText = zanNum;
        }
        if (state == 2) {
          zanNum--;
          zan.innerText = zanNum;
        }
      });
    },
    attention(e) {
      follow({
        user: this.dynamicList.user_id
      }).then(res => {
        //关注成功

        if (res.data.data.type == 1) {
          e.target.innerText = "取消关注";
          sessionStorage.setItem("isLink", 1);
        }
        //取消关注成功
        if (res.data.data.type == 2) {
          e.target.innerHTML = "+关注";
          sessionStorage.setItem("isLink", 0);
        }
      });
    },
    sendComment() {
      //发表动态评论，入库
      sendMask({
        id: this.$route.query.id,
        detail: this.content
      }).then(() => {
        let itemObj = {};
        itemObj.avatar = this.user.avatar;
        itemObj.nickname = this.user.nickname;
        itemObj.created_at = "刚刚";
        itemObj.describe = this.content;
        this.threeComment.unshift(itemObj);
        //清空表框
        this.content = "";
      });
    }
  },
  mounted() {
    getDetailtData({
      id: this.$route.query.id
    }).then(res => {
      if (res.status === 200) {
        this.dynamicList = res.data.data;
        let evaluate = res.data.data.evaluate;
        //循环过滤评论
        evaluate.forEach((item, index) => {
          //取前三条
          if (index <= 2) {
            let itemObj = {};
            itemObj.avatar = item.avatar;
            itemObj.nickname = item.nickname;
            itemObj.created_at = item.created_at;
            itemObj.describe = item.describe;
            this.threeComment.push(itemObj);
          }
          //取余下的评论
          if (index > 2) {
            let itemObj = {};
            itemObj.avatar = item.avatar;
            itemObj.nickname = item.nickname;
            itemObj.created_at = item.created_at;
            itemObj.describe = item.describe;
            this.otherComment.push(itemObj);
          }
        });
      }
    });
    console.log(this.user);
  },
  components: {
    dynamicPanel1,
    dynamicPanel2,
    moreMask
  }
};
</script>

<style lang="less" scoped>
.container {
  .detail {
    background: #fff;

    .header {
      padding: 0 3.2%;
      display: flex;
      justify-content: space-between;
      height: 2.6rem;

      .left {
        display: flex;

        img {
          width: 1.5rem;
          height: 1.5rem;
          margin-top: 0.5rem;
        }

        .text {
          margin-left: 0.32rem;

          .username {
            color: rgba(68, 68, 68, 1);
            font-size: 0.52rem;
            margin: 0.6rem 0 0.1rem;
          }

          .time {
            color: rgba(153, 153, 153, 1);
            font-size: 0.44rem;
          }
        }

        .follow-btn {
          margin: 0.64rem 0 0 0.5rem;
          border: none;
          background: rgba(0, 120, 255, 1);
          color: #fff;
          height: 1rem;
          line-height: 1rem;
          font-size: 0.48rem;
          padding: 0 0.4rem;
          border-radius: 0.5rem;

          img {
            height: 0.4rem;
            width: 0.4rem;
            vertical-align: middle;
            margin: 0;
          }
        }
      }

      .right {
        .more-btn {
          vertical-align: top;
          background: none;
          border: none;
          padding: 0;
          width: 1rem;
          background-image: url("../../assets/用户主页1-assets/more.png");
          background-size: 0.12rem 0.8rem;
          background-position: 100% 50%;
          height: 2.6rem;
          background-repeat: no-repeat;
        }
      }
    }
    .video {
      width: 100%;
      height: 500px;
      video {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .content {
      font-size: 0.64rem;
      color: rgba(68, 68, 68, 1);
      line-height: 0.96rem;
      padding: 0.6rem 3.2%;
    }

    .location {
      color: rgba(51, 147, 255, 1);
      font-size: 0.56rem;
      height: 0.8rem;
      line-height: 0.8rem;
      padding: 0 3.2%;

      img {
        height: 0.64rem;
        vertical-align: middle;
      }
    }

    .footer {
      margin-top: 0.5rem;
      padding: 0 3.2%;

      .btn {
        vertical-align: top;
        margin-right: 1.5rem;
        color: #888888;
        border: none;
        background: none;
        font-size: 0.48rem;
        padding: 0;

        img {
          vertical-align: middle;
          height: 0.6rem;
          margin-right: 0.2rem;
        }
      }
    }

    .comment {
      position: relative;
      background: rgba(245, 245, 245, 1);
      border-radius: 0.1rem;
      padding: 0.24rem 0.72rem;
      padding-left: 2rem;
      margin: 0.8rem 3.2% 0;

      .triangle {
        position: absolute;
        left: 0.74rem;
        top: -0.72rem;
        height: 0;
        box-sizing: content-box;
        border: 0.36rem solid rgba(245, 245, 245, 0);
        border-bottom: 0.36rem solid rgba(245, 245, 245, 1);
        width: 0;
      }

      .comment-cell {
        font-size: 0.56rem;
        color: #666666;
        padding: 0.36rem 0;
        position: relative;

        .comment-avatar {
          position: absolute;
          top: 0.48rem;
          left: -1.68rem;
          width: 1.28rem;
          height: 1.28rem;
        }

        .time {
          position: absolute;
          color: rgba(153, 153, 153, 1);
          font-size: 0.44rem;
          top: 0.44rem;
          right: 0.36rem;
        }

        .nickname {
          color: #3875d1;
        }
      }
    }

    .show-more {
      font-size: 0.64rem;
      text-align: center;
      padding: 0.4rem 0;
      color: rgba(56, 117, 209, 1);
    }
  }

  .recommend {
    .title {
      color: rgba(68, 68, 68, 1);
      font-size: 0.52rem;
      padding: 0.48rem 3.2% 0;
    }
  }

  .bottom-input {
    position: fixed;
    height: 2rem;
    width: 100%;
    padding-left: 2.56rem;
    padding-right: 2.24rem;
    bottom: 0;
    left: 0;
    background: #fff;

    .input {
      float: left;
      width: 99%;
      height: 1.36rem;
      margin-top: 0.3rem;
      font-size: 0.64rem;
      padding-left: 0.5rem;
      border: 1px solid rgba(234, 234, 234, 0.9);
    }

    .zan {
      height: 2rem;
      float: left;
      width: 2.56rem;
      margin-left: calc(-100% - 2.56rem);
      border: none;
      background: none;
      background-image: url("../../assets/用户主页1-assets/zan.png");
      background-size: 0.74rem 0.78rem;
      background-position: 50% 50%;
      background-repeat: no-repeat;
    }

    .send {
      height: 2rem;
      float: left;
      width: 3rem;
      margin-right: -3rem;
      border: none;
      background: none;
      color: rgba(68, 68, 68, 1);
      font-size: 0.64rem;
      text-align: center;
    }
  }
}
</style>
